<form nz-form [formGroup]="form">
  <nz-card class="edit-card pt10" [nzTitle]="template1" [nzBordered]="false">
    <ng-template #template1>
      <div class="flex align-items-center">
        <img style="width: 19px; height: 29px" src="./assets/img/edit-icon.png" alt="" />
        <div class="flex1 flex" style="border-bottom: 1px solid #e8e8e8">
          <span class="flex1 pb5 ml5">基本信息</span>
        </div>
      </div>
    </ng-template>
    <nz-form-item>
      <nz-form-label [nzSpan]="6" nzFor="stationName">驿站名称</nz-form-label>
      <nz-form-control [nzSpan]="14">
        <div class="check-modal">
          <div class="flex flex-center pl0 flex-right">
            <span class="pl10">{{ record?.stationName }}</span>
          </div>
        </div>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="6" nzFor="adminName">驿站所有人姓名</nz-form-label>
      <nz-form-control [nzSpan]="14">
        <div class="check-modal">
          <div class="flex flex-center pl0 flex-right">
            <span class="pl10">{{ record?.adminName }}</span>
          </div>
        </div>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="6" nzFor="address">地址</nz-form-label>
      <nz-form-control [nzSpan]="14">
        <div class="check-modal">
          <div class="flex flex-center pl0 flex-right">
            <span class="pl10">{{ record?.address }}</span>
          </div>
        </div>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="6" nzFor="idNumber">身份证号码</nz-form-label>
      <nz-form-control [nzSpan]="14">
        <div class="check-modal">
          <div class="flex flex-center pl0 flex-right">
            <span class="pl10">{{ record?.idNumber }}</span>
          </div>
        </div>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="6" nzFor="code">描述</nz-form-label>
      <nz-form-control [nzSpan]="14">
        <div class="check-modal">
          <div class="flex flex-center pl0 flex-right">
            <span class="pl10">{{ record?.description }}</span>
          </div>
        </div>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="6" nzFor="code">驿站图片</nz-form-label>
      <nz-form-control [nzSpan]="14">
        <div class="check-modal">
          <div class="flex flex-center pl0 flex-right">
            <img [src]="stationPhotoPreview" [ngStyle]="{ width: '100%', height: '100%' }" (click)="previewVisible = true" />
            <nz-modal
              [nzVisible]="previewVisible"
              [nzContent]="modalContent"
              nzTitle="预览"
              [nzFooter]="null"
              (nzOnCancel)="previewVisible = false"
            >
              <ng-template #modalContent>
                <img [src]="stationPhotoPreview" [ngStyle]="{ width: '100%', height: '100%' }" />
              </ng-template>
            </nz-modal>
          </div>
        </div>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="6" nzFor="code">身份证正面</nz-form-label>
      <nz-form-control [nzSpan]="14">
        <div class="check-modal">
          <div class="flex flex-center pl0 flex-right">
            <img [src]="idCardFrontPreview" [ngStyle]="{ width: '100%', height: '100%' }" (click)="previewVisible2 = true" />
            <nz-modal
              [nzVisible]="previewVisible2"
              [nzContent]="modalContent2"
              nzTitle="预览"
              [nzFooter]="null"
              (nzOnCancel)="previewVisible2 = false"
            >
              <ng-template #modalContent2>
                <img [src]="idCardFrontPreview" [ngStyle]="{ width: '100%', height: '100%' }" />
              </ng-template>
            </nz-modal>
          </div>
        </div>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="6" nzFor="code">身份证反面</nz-form-label>
      <nz-form-control [nzSpan]="14">
        <div class="check-modal">
          <div class="flex flex-center pl0 flex-right">
            <img [src]="idCardBackPreview" [ngStyle]="{ width: '100%', height: '100%' }" (click)="previewVisible3 = true" />
            <nz-modal
              [nzVisible]="previewVisible3"
              [nzContent]="modalContent3"
              nzTitle="预览"
              [nzFooter]="null"
              (nzOnCancel)="previewVisible3 = false"
            >
              <ng-template #modalContent3>
                <img [src]="idCardBackPreview" [ngStyle]="{ width: '100%', height: '100%' }" />
              </ng-template>
            </nz-modal>
          </div>
        </div>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="6" nzFor="code">本人手持身份证照片</nz-form-label>
      <nz-form-control [nzSpan]="14">
        <div class="check-modal">
          <div class="flex flex-center pl0 flex-right">
            <img [src]="personalIdCardPhotoPreview" [ngStyle]="{ width: '100%', height: '100%' }" (click)="previewVisible4 = true" />
            <nz-modal
              [nzVisible]="previewVisible4"
              [nzContent]="modalContent4"
              nzTitle="预览"
              [nzFooter]="null"
              (nzOnCancel)="previewVisible4 = false"
            >
              <ng-template #modalContent4>
                <img [src]="personalIdCardPhotoPreview" [ngStyle]="{ width: '100%', height: '100%' }" />
              </ng-template>
            </nz-modal>
          </div>
        </div>
      </nz-form-control>
    </nz-form-item>
  </nz-card>
  <nz-card class="edit-card pt10" [nzTitle]="template2" [nzBordered]="false">
    <ng-template #template2>
      <div class="flex align-items-center">
        <img style="width: 19px; height: 29px" src="./assets/img/edit-icon.png" alt="" />
        <div class="flex1 flex" style="border-bottom: 1px solid #e8e8e8">
          <span class="flex1 pb5 ml5">状态</span>
        </div>
      </div>
    </ng-template>
    <nz-form-item>
      <nz-form-label [nzSpan]="6" nzFor="code" nzRequired>驿站状态</nz-form-label>
      <nz-form-control [nzSpan]="14">
        <nz-radio-group formControlName="stationStats" nzButtonStyle="solid">
          <label *ngFor="let item of statList" nz-radio-button [nzValue]="item.dictKey">{{ item.dictValue }}</label>
        </nz-radio-group>
      </nz-form-control>
    </nz-form-item>
  </nz-card>
</form>

<div class="drawer-footer">
  <button nz-button nzType="default" (click)="close()"><i nz-icon [nzIconfont]="'pets_close'"></i>关闭</button>
  <button nz-button nzType="primary" (click)="save()"><i nz-icon [nzIconfont]="'pets_select'"></i>确认</button>
</div>
